<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/swfupload.css" type="text/css" />
<title>添加石材</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>
<script type="text/javascript">
		var upload1, upload2;
		var completed=false,error=false;
		var flag = true;
		
		window.onload = function() {
			upload1 = new SWFUpload({

				//提交路径
				upload_url: "uploadImage.action;jsessionid=<%=request.getSession().getId()%>",
				//向后台传递额外的参数
				//post_params: {"sessionId" : $("#sessionId").val()},
				//上传文件的名称
				file_post_name: "file",
				
				// 下面自己按照字面意思理解
				file_size_limit : "1024",	// 1MB
				file_types : "*.jpg;*.png;*.gif",
				file_types_description : "图片",
				file_upload_limit : "6",
				file_queue_limit : "6",

				// 事件处理
				file_dialog_start_handler : fileDialogStart,
				file_queued_handler : fileQueued,
				file_queue_error_handler : fileQueueError,
				file_dialog_complete_handler : fileDialogComplete,
				upload_start_handler : uploadStart,
				upload_progress_handler : uploadProgress,
				upload_error_handler : uploadError,
				upload_success_handler : uploadSuccess,
				upload_complete_handler : uploadComplete,
				queue_complete_handler : queueComplete,

				// 按钮的处理
				button_image_url : "images/XPButtonUploadText_61x22.png",
				button_placeholder_id : "buttonUpload",
				button_width: 61,
				button_height: 22,
				
				// Flash Settings
				flash_url : "js/swfupload.swf",
				

				custom_settings : {
					progressTarget : "fsUploadProgress1",
					cancelButtonId : "btnCancel1"
				},
				
				// Debug Settings
				debug: false
			});
	     }

	function queueComplete(){
		$("#uploadTip").html("图片已成功上传");
		$("#uploadTip").css('color', 'green');
		completed=true;
		error=false;
		}
	function uploadError(){
		alert("图片上传出现问题 ,请稍候再试");
		error=true;
		completed=false;
		}
	function submitForm(){
		if(validate()==true && flag == true){
			document.detailForm.submit();
		};		
	}
	function validate(){
		var str = $.trim($('#chineseName').val());
		if(!textValidate(str, $('#chineseName'), $('#cnameTip'), 50)){
			return false;
		}

		str = $.trim($('#englishName').val());
		if(!textValidate(str, $('#englishName'), $('#enameTip'), 50)){
			return false;
		}

	/*	str = $.trim($('#sourceland').val());
		if(!textValidate(str, $('#sourceland'), $('#sourcelandTip'), 50)){
			return false;
		}

		str = $.trim($('#category').val());
		if(!textValidate(str, $('#category'), $('#categoryTip'), 50)){
			return false;
		}
		
		str = $.trim($('#stoneWA').val());
		if(!textValidate(str, $('#stoneWA'), $('#stoneWATip'), 50)){
			return false;
		}
		
		str = $.trim($('#stoneBD').val());
		if(!textValidate(str, $('#stoneBD'), $('#stoneBDTip'), 50)){
			return false;
		}
		
		str = $.trim($('#stoneSH').val());
		if(!textValidate(str, $('#stoneSH'), $('#stoneSHTip'), 50)){
			return false;
		}
		
		str = $.trim($('#stoneMR').val());
		if(!textValidate(str, $('#stoneMR'), $('#stoneMRTip'), 50)){
			return false;
		}
		
		str = $.trim($('#stoneCS').val());
		if(!textValidate(str, $('#stoneCS'), $('#stoneCSTip'), 50)){
			return false;
		}

		str = $.trim($('#venation').val());
		if(!textValidate(str, $('#venation'), $('#venationTip'), 50)){
			return false;
		}
*/
		str = $.trim($('#color').val());
		if(!textValidate(str, $('#color'), $('#colorTip'), 50)){
			return false;
		}

		/*str = $.trim($('#minprice').val());
		if(!numValidate(str, $('#minprice'), $('#minpriceTip'))){
			return false;
		}

		str = $.trim($('#minprice').val());
		if(!numValidate(str, $('#minprice'), $('#minpriceTip'))){
			return false;
		}*/
/*
		str = $.trim($('#level').val());
		if(!textValidate(str, $('#level'), $('#levelTip'), 10)){
			return false;
		}

		str = $.trim($('#purpose').val());
		if(!textValidate(str, $('#purpose'), $('#purposeTip'), 50)){
			return false;
		}

		str = $.trim($('#successfulCase').val());
		if(!textValidate(str, $('#successfulCase'), $('#successfulCase'), 50)){
			return false;
		}
*/
		if(!completed){
			$("#uploadTip").html("您未上传图片或图片上传未完成");
			return false;
			}
		if(error){
			$("#uploadTip").html("图片上传遇到问题,请稍候再试");
			return false;
			}
		return true;
	}

	function validateName(url){
		var params = {
				chineseName : $("#chineseName").val()
			};
		var url0 = url+"/adminj/checkName.action";
		jQuery.post(url0, params,callbackValidateName, "json");
	}
	function callbackValidateName(data){
			if(data.flag>0){
				$('#cnameTip').text("该名字已存在");
				flag = false;
			}else{
				$('#cnameTip').text("");
				flag = true;
			}
			
		}
	
	function textValidate(str, id, tipId, l){
		if(str.length == 0)
		{
			tipId.hide();
			tipId.html("*不能为空");
			id.focus();
			tipId.fadeIn();
			return false;
		}
		else if(str.length>l)
		{
			tipId.hide();
			tipId.html("*不能超过50个字");
			id.focus();
			tipId.fadeIn();
			return false;
		}
		else{
			tipId.hide();
			return true;
		}
	}

	function numValidate(str, id, tipId){
		if(str.length == 0)
		{
			tipId.hide();
			tipId.html("*不能为空");
			id.focus();
			tipId.fadeIn();
			return false;
		}
		var reg = /\D/; 
		if(str.match(reg)!=null){
			tipId.hide();
			tipId.html("*请输入正确的数字");
			id.focus();
			tipId.fadeIn();
			return false;
		}else{
			tipId.hide();
			return true;
		}
	}
	</script>
<style>
	.tip{
	margin-left:10px;
	font-size: 9pt;
	color: red;	
}
input{height:20px;line-height:20px;background:#FFF;padding:2px 5px 2px 5px;margin:0;border:1px solid #CCCCCC}
select{width:120px;height:24px;line-height:24px;}
</style>	
</head>

<body>
<div id="man_zone">
  <form action = "addStone.action" name=detailForm method="post">
  <table width="99%" border="1" align="center"  cellpadding="3" cellspacing="1">
    <tr>
      <td width="18%" class="left_title_1"><span class="left-title">中文名：</span></td>
      <td width="82%"><input type="text" name="chineseName" id="chineseName" size="50" onblur="validateName('${pageContext.request.contextPath}')"/>
      	<span class="tip" id = "cnameTip">
      	</span>
      </td>
    </tr>
	<tr>
		<td class="left_title_2">英文名：</td>
      	<td><input type="text" name="englishName" id="englishName" size="50"/><span class="tip" id="enameTip"></span></td>
    </tr>
    <tr>
      <td class="left_title_1">原产地：</td>
      <td><input type="text" name="sourceland" id="sourceland" size="50"/><span class="tip" id="sourcelandTip"></span></td>
    </tr>
    <tr>
      <td class="left_title_2">种类：</td>
      <td>
      	<select name="material" id="category">
      		<option value="花岗石">花岗石</option>
      		<option value="石灰石">石灰石</option>
      		<option value="大理石">大理石</option>
      		<option value="石英岩">石英岩</option>
      		<option value="板岩">板岩</option>
      		<option value="砂岩">砂岩</option>
      		<option value="洞石">洞石</option>
      		<option value="玉石">玉石</option>
      		<option value="其它">其它</option>
      	</select>
      <span class="tip" id="categoryTip"></span></td>
    </tr>
    <tr>
		<td class="left_title_1">抗压强度（C.S）：</td>
      	<td><input type="text" name="stoneCS" id="stoneCS" size="50"/><span class="tip" id="stoneCSTip"></span></td>
    </tr>
    <tr>
		<td class="left_title_2">抗折强度（M.R）：</td>
      	<td><input type="text" name="stoneMR" id="stoneMR" size="50"/><span class="tip" id="stoneMRTip"></span></td>
    </tr>
    <tr>
		<td class="left_title_1">肖氏硬度（S.H）：</td>
      	<td><input type="text" name="stoneSH" id="stoneSH" size="50"/><span class="tip" id="stoneSHTip"></span></td>
    </tr>
    <tr>
		<td class="left_title_2">岩石密度（B.D）：</td>
      	<td><input type="text" name="stoneBD" id="stoneBD" size="50"/><span class="tip" id="stoneBDTip"></span></td>
    </tr>
    <tr>
		<td class="left_title_1">吸水率（W.A）：</td>
      	<td><input type="text" name="stoneWA" id="stoneWA" size="50"/><span class="tip" id="stoneWATip"></span></td>
    </tr>
    <tr>
      <td class="left_title_2">纹理：</td>
      <td>
      	<select name="venation" id="venation">
      		<option value="直纹">直纹</option>
      		<option value="网纹">网纹</option>
      		<option value="乱纹">乱纹</option>
      		<option value="其它纹路">其它纹路</option>
      	</select>
      
      <span class="tip" id="venationTip"></span></td>
    </tr>
    <tr>
      <td class="left_title_1">颜色：</td>
      <td>
      	<select name="color" id="color">
      		<option value="白色">白色</option>
      		<option value="黑色">黑色</option>
      		<option value="红色">红色</option>
      		<option value="灰色">灰色</option>
      		<option value="黄色">黄色</option>
      		<option value="蓝色">蓝色</option>
      		<option value="绿色">绿色</option>
      		<option value="紫色">紫色</option>
      		<option value="棕色">棕色</option>
      		<option value="青色">青色</option>
      		<option value="彩色">彩色</option>
      	</select>
      <span class="tip" id="colorTip"></span></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td class="left_title_2">价格上限：</td>
      <td><input type="text" name="minprice" id="minprice" size="50"/><span class="tip" id="minpriceTip"></span></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td class="left_title_1">价格下限：</td>
      <td><input type="text" name="maxprice" id="maxprice" size="50"/><span class="tip" id="maxpriceTip"></span></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td class="left_title_2">档次：</td>
      <td>
      	<select name="level" id="level">
      		<option value="高档">高档</option>
      		<option value="中档">中档</option>
      		<option value="低档">低档</option>
      	</select>
      <span class="tip" id="levelTip"></span></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td class="left_title_1">适用于：</td>
      <td><input type="text" name="purpose" id="purpose" size="50"/><span class="tip" id="purposeTip"></span></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td class="left_title_2">成功案例：</td>
      <td><input type="text" name="successfulCase" id="successfulCase" size="50"/><span class="tip" id="successfulCaseTip"></span></td>
    </tr>
  </table>
   </form>
   <table width="99%" border="0" align="center"  cellpadding="3" cellspacing="1" class="table_style">
    <tr bgcolor="#FFFFFF">
      <td class="left_title_2" width="18%" >选择图片</td>
      <td width="425">
		
		<div id="content" class="upload" style="width:420px;">
	    <form action="upload.action" method="post" name="thisform" enctype="multipart/form-data">
			<div>
				<div class="fieldset flash" id="fsUploadProgress1">
					<span class="legend">文件上传</span>
				</div>
				<div style="padding-left:5px;">
					<span id="buttonUpload"></span>
					<input id="btnCancel1" type="button" value="Cancel Uploads" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
					<br />
				</div>
			</div>
	    </form>  
	    </div>
	   
	</td>
	<td> <div><span class="tip" id="uploadTip"></span></div></td>
    </tr>
    <tr>
    	<td></td>
    	<td><button onclick="submitForm()">保存并继续</button></td>
    	<td><span class="tip">${error }</span></td>
    </tr>
  </table>

 
</div>
</body>
</html>
